<template>
  <view class="presentation">
    <view class="div">
      <view class="yellow">{{ activityMsgs.joinNum }}</view>
      <view class="p">参与人数</view>
    </view>
    <view class="div">
      <view class="yellow">{{ activityMsgs.accumulatedNum }}</view>
      <view class="p">累计票数</view>
    </view>
    <view class="div">
      <view class="yellow">{{ activityMsgs.visitNum }}</view>
      <view class="p">累计访问</view>
    </view>
  </view>
</template>

<script setup >
import { ref } from "vue";
const activityMsgs = ref([]);
//获取职位数据
uni.request({
  url: "http://1.92.114.25:6624/getactives",
  method: "GET",
  data: {},
  success: (res) => {
    activityMsgs.value = res.data.activityMsgs[0];
    console.log("职位数据", res.data.activityMsgs[0]);
  },
  fail: (err) => {
    console.log(err);
  },
});
</script>

<style lang="scss">
.yellow {
  color: #fdcb77;
}
.p {
  color: #e0e0e0;
}
.presentation {
  text-align: center;
  margin: 20px auto;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 150px;
  border: 3px solid #fdcb77;
  background-color: #332f38;
  border-radius: 10px;
  .div {
    height: 100px;
    .p {
      margin: 10px 0;
    }
  }
}
</style>